<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>下拉菜单</title>
    <script src="js/jquery-3.6.3.js"></script>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
            text-align: center;
        }
        .list>li{
            float: left;
            width: 100px;
            background-color: aqua;
            border: 1px solid lightgrey;
        }
        .list .menuGroup{
            display: none;
        }
        .list .menuGroup li{
            background-color: beige;
            border: 1px solid lightgrey;
        }
        .wrap{
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="wrap">
    <ul class="list">
        <li>
            <span>标题1</span>
            <ul class="menuGroup">
                <li>子标题1</li>
                <li>子标题1</li>
                <li>子标题1</li>
                <li>子标题1</li>
            </ul>
        </li>
        <li>
            <span>标题2</span>
            <ul class="menuGroup">
                <li>子标题1</li>
                <li>子标题1</li>
                <li>子标题1</li>
                <li>子标题1</li>
            </ul>
        </li>
        <li>
            <span>标题3</span>
            <ul class="menuGroup">
                <li>子标题1</li>
                <li>子标题1</li>
                <li>子标题1</li>
                <li>子标题1</li>
            </ul>
        </li>
        <li>
            <span>标题4</span>
            <ul class="menuGroup">
                <li>子标题1</li>
                <li>子标题1</li>
                <li>子标题1</li>
                <li>子标题1</li>
            </ul>
        </li>
    </ul>
</div>
</body>


<script>
    $(function (){
        $('.list>li').mouseenter(function (){
            $(this).children('.menuGroup').stop(true, false).slideDown(300).parent().siblings('li').children('.menuGroup').slideUp(150);
        })
        $('.list>li').mouseleave(function (){
            $(this).children('.menuGroup').stop(true, false).slideUp(150);
        })
    })
</script>
</html>